<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
        <meta charset="utf-8"></meta>
        <title>Aratuk</title>

        <link rel="stylesheet" href="site/css/bootstrap.css"/>
        <link rel="stylesheet" href="site/css/bootstrap.css"/>
        <link rel="stylesheet"  href="site/css/font-awesome/css/font-awesome.min.css"/>

        <link rel="stylesheet" href="site/css/style.css"/>
        <link rel="stylesheet" href="site/css/swiper.min.css"/>

        <!--        <script src="site/js/jquery.js"></script>-->
        <!--        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
        <script src="media/scripts/autoNumeric.js"></script>
        <script src="site/js/bootstrap.min.js"></script>
        <script src="site/js/swiper.jquery.min.js"></script>


    </h:head>
    <h:body>
        <script>
            function logoSmall() {
                var nav = $('#main-menu-logo');
                var img = $('#img-logo');

                $('.shadow-logo-r').addClass('fixed-shadow');
                nav.addClass('no-after');
                nav.addClass("fixed-logo");
                img.attr('src', 'site/images/logo_reduzida.png');
            }
            
            function logoOriginal() {
                var nav = $('#main-menu-logo');
                var img = $('#img-logo');

                nav.removeClass("fixed-logo");
                nav.removeClass('no-after');
                $('.shadow-logo-r').removeClass('fixed-shadow');
                img.attr('src', 'site/images/logo.png');
            }
            
            
        </script>
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-md-12 main-menu">
                        <div class="col-md-2">
                            <div class="shadow-logo-l"></div>
                            <a href="index.xhtml">
                                <div id="main-menu-logo" class="logo">
                                    <img id="img-logo" src="site/images/logo.png"/>
                                </div>
                            </a>
                            <div class="shadow-logo-r"></div>
                        </div>
                        <div class="col-md-7 menu">
                            <ul>
                                <li><a href="listajogos.xhtml">Jogos</a></li>
                                <li><a href="#">Loterias</a></li>
                                <li><a href="#">Como Jogar</a></li>
                                <li><a href="#">Resultados</a></li>
                                <li><a href="#">Promoções</a></li>
                                <li><a href="#">Sobre</a></li>
                            </ul>
                        </div>
                        <div class="col-md-3 menu-login">
                            <h:form prependId="false">
                                <p:commandButton  styleClass="button-green" value="Login" type="button" onclick="PF('dialoglogin').show();" />
                                <p:commandButton  styleClass="button-brown" value="Criar Conta" type="button" onclick="PF('dialognovousuario').show();" />
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <section id="wrap" >
            <h:form prependId="false"></h:form>
            <ui:insert name="body" ></ui:insert>
        </section>


        <script>
            var swiper = new Swiper('.swiper-container', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                slidesPerView: 'auto',
                paginationClickable: true,
                spaceBetween: 30
            });
        </script>
        <footer>

        </footer>

        <h:form  prependId="false">
            <p:dialog id="dialog" widgetVar="dialoglogin" dynamic="true" resizable="false"
                      modal="true" width="500">
                <f:facet name="header">
                    Login
                </f:facet>
                <p:panel>
                    <div class="container-fluid">
                        <div class="row">
                            <p:inputText placeholder="Login" styleClass="col-md-12"/>
                            <p:inputText placeholder="Password" styleClass="col-md-12"/>
                        </div>
                    </div>
                </p:panel>
                <f:facet name="footer">
                    <p:commandButton  styleClass="button-green " value="Login" type="button" onclick="PF('dialoglogin').hide();" />
                </f:facet>
            </p:dialog>
            <p:dialog id="dialognovo" widgetVar="dialognovousuario" dynamic="true" resizable="false"
                      modal="true" width="500" showEffect="puff" hideEffect="puff">
                <f:facet name="header">
                    Entre é GRÁTIS
                </f:facet>
                <p:panel id="formnovousuario">

                    <div class="container-fluid">
                        <div class="row">
                            <p:inputText id="email" placeholder="E-mail" styleClass="col-md-12" required="true" value="#{managerCliente.usuario.email}"/>
                            <div class="col-md-12"><p:message for="email"/></div>
                            <p:password id="senha" placeholder="Senha" styleClass="col-md-12"  match="repitasenhausuario" 
                                        required="true" 
                                        value="#{managerCliente.usuario.senha}" />
                            <div class="col-md-12"><p:message for="senha"/></div>
                            <p:password id="repitasenhausuario" label="" placeholder="Repita a Senha" styleClass="col-md-12" required="true"/>
                        </div>
                    </div>

                </p:panel>
                <f:facet name="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="privacidade-e-termos col-md-9">
                                Ao clicar em registrar, você afirma que leu e aceitou os  <a href="#">Termos de Uso</a>
                                e  <a href="#">Política de Privacidade</a>
                            </div>

                            <p:commandButton  styleClass="button-green col-md-2 " value="Registrar" 
                                              update="formnovousuario"
                                              actionListener="#{managerCliente.novousuario()}" />
                        </div>
                    </div>
                </f:facet>
            </p:dialog>
        </h:form>
    </h:body>
</html>

